<template>
  <div class="container mx-auto px-6 py-12">
    <div class="text-center mb-16">
      <h2 class="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">{{ solutions?.title }}</h2>
      <div class="w-20 h-1 bg-indigo-600 mx-auto mb-6"></div>
      <p class="text-gray-600 max-w-3xl mx-auto">
        {{ solutions?.description }}
      </p>
    </div>

    <div class="grid lg:grid-cols-3 gap-8">
      <div v-for="(service, index) in solutions?.items" :key="index"
        class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
        <div class="w-16 h-16 rounded-full flex items-center justify-center mb-6">
          <img v-if="service.image_url" :src="service.image_url" :alt="service.title" class="w-8 h-8 rounded-full">
        </div>
        <h3 class="text-xl font-semibold text-gray-800 mb-3">{{ service.title }}</h3>
        <p class="text-gray-600">{{ service.description }}</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Solution } from "~/types/page-admin"

const props = defineProps<{
  solutions?: Solution
}>();

</script>